<template>
  <div>
    <!-- 左边 -->
    <div class="left" >
      <div class="leftWhith">
        <div class="newapp">审批新申请</div>



        <!-- icon加题头 -->
        <div v-for="(item , index) of apply" :key="index" >
          <div class="gate">{{item.name}}</div>
          <div style="width: 101%" >

            <div class="iconBorder"  v-for="(itemx,indexx) of item.iconxx" :key="indexx" @click="drawer = true">
              <i :class="itemx.icon"></i>
              <div>{{itemx.iconNum}}</div>

           
           
            </div>
          </div>
          <div class="clear"></div>
        </div>






      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <div class="newapp">用户管理</div>
          <iStarted></iStarted>
        </el-tab-pane>
        <el-tab-pane label="待审批" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="审核通过" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="审批拒绝" name="fourth">定时任务补偿</el-tab-pane
        >
      </el-tabs>
    </div>
    <div class="clear"></div>

          <!-- 抽屉 -->
                  <span>
                  <el-drawer
                  title="我是标题"
                  size="50%"
                  style="margin:0;padding:0;border: 0;"
                  :visible.sync="drawer"
                  :with-header="false">
                    <!-- 关闭 -->
                    <div class="closeBtn" @click="drawer = false">
            <div>关闭</div>
          </div>

                  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
                </el-drawer>
              </span>
  </div>
</template>
<script>
  import iStarted from "@/components/iStarted"
export default {
  data() {
    return {
      activeName: "first",
      drawer: false,
      drawer1: false,
      drawer2: false,
      drawer3: false,
      ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]},
      apply:[{ 
          name:"假勤",
          iconxx:[
            {icon:'el-icon-s-order',iconNum:'请假',id:"drawer = true"},
            {icon:'el-icon-s-cooperation',iconNum:'出差',id:"drawer1 = true"},
            {icon:'el-icon-s-finance',iconNum:'外出',id:"drawer2 = true"},
            {icon:'el-icon-s-opportunity',iconNum:'加班',id:"drawer3 = true"},
          ],
          id:"drawer = true"
    },
    { 
          name:"行政",
          iconxx:[
            {icon:'el-icon-s-order',iconNum:'请假',id:"drawer = true"},
            {icon:'el-icon-s-cooperation',iconNum:'出差',id:"drawer1 = true"},
            {icon:'el-icon-s-finance',iconNum:'外出',id:"drawer2 = true"},
            {icon:'el-icon-s-opportunity',iconNum:'加班',id:"drawer3 = true"},
          ],
          id:"drawer2 = true"
    },
  ]
    };
  },
  components:{
    iStarted
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}

.clear {
  clear: both;
}
.iconBorder {
    padding-top: 18px;
    padding-bottom: 8px;
    font-size: 24px;
    display: block;
    padding-bottom: 5px;
    color: #4285f4;

  div {
    font-size: 12px;
    color: #383838;
    padding-bottom: 18px;
  }
}
.newapp {
  line-height: 36px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 0, 0, 0.081);
  padding: 0 10px;
}
.gate {
  line-height: 36px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.081);
  border-top: 1px solid rgba(0, 0, 0, 0.081);
  padding: 0 10px;
}

@media screen and (min-width: 1192px) {
  .left {
    float: left;
    width: 24%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.081);
    background-color: white;
    margin: 6px;
  }
  .iconBorder {
    width: 33.3333333333333333333333333333333333333333333333333333333333%;
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.081);
    box-sizing: border-box;
    height: 80px;
    text-align: center;
    margin-left: -1px;
    cursor: pointer;
  }
  .right {
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.081);
    width: 73%;
    margin: 6px;
  }
}
@media screen and (max-width: 1191px) {
  .left {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.081);
    background-color: white;
    width: 100%;
  }
  .iconBorder {
    border-top: 1px solid rgba(0, 0, 0, 0.081);
    height: 80px;
    text-align: center;
    cursor: pointer;
  }
  .right {
    border: 1px solid rgba(0, 0, 0, 0.081);
    width: 100%;
  }
}
</style>